<!--
  *@Description : 签到组件
  *@author 萧红
  *@date 2020-05-26 22:31
  *@LastEditTime 2020-05-26 22:31
  *@LastEdititors
-->
<template>
    <div id="sign">
      <Tittle :title="'签到'"></Tittle>
      <cube-scroll :data="[1,2,3,4]" :ref="'scroll'">
        <div class="top">
          <div>今日第 <span style="color:#ff74a3">11527</span> 个签到</div>
          <div>系统时间：{{systemDateStr}}</div>
          <div class="sign-btn">签到</div>
          <div style="color:#ccc">已连续签到3天，够漏签37</div>
        </div>
        <div class="date">
        </div>
      </cube-scroll>
    </div>
</template>

<script>
import Tittle from '../../components/Tittle'
// import Calendar from 'vue-calendar-component'
export default {
  name: 'Sign',
  components: {
    Tittle
    // Calendar
  },
  data () {
    return {
      year: 0,
      month: 1,
      date: 1,
      hour: 1,
      minute: 1,
      second: 1
    }
  },
  computed: {
    systemDateStr () {
      return `${this.year}-${this.month}-${this.date} ${this.hour}:${this.minute}:${this.second}`
    }
  },
  mounted () {
    setInterval(() => {
      let date = new Date()
      this.year = date.getFullYear()
      this.month = date.getMonth() + 1
      this.date = date.getDate()
      this.hour = date.getHours()
      this.minute = date.getMinutes()
      this.second = date.getSeconds()
    }, 1000)
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../../node_modules/stylus-px2rem";
#sign
{
  .top
  {
    width 100%
    height 56px
    display: flex
    padding 5px 0px
    flex-flow column nowrap
    justify-content space-between
    box-sizing border-box
    border-bottom 3px solid #f0f0f0
    .sign-btn
    {
      width: 100px;
      margin 0px auto
      height: 15px;
      line-height 15px
      background-color: #DDD6F3;
      background-image: linear-gradient(90deg, #ffc4f4 25%, #ff74a3 84%);
      border-radius 10px
      color snow
    }
  }
}
</style>
